<template>
	<view style="padding:10rpx 30rpx;">
		<view class="okami" @tap="detail">
			<view class="left">
				<u-avatar mode="square" size='200' bgColor='#b3b3b3' :src="avatar_src"></u-avatar>
			</view>
			<view class="right">
				<view class="top">
					<view class="title tui-flex-box">
						<text style="font-size: larger;">{{ play_name }}</text>
						<u-tag style="margin-left: 20rpx;" :text="sex_age" :type="tag_type" shape="circle" size="mini"/>
					</view>
					<view class="bottom">
						<u-tag class="paly_tag" type="error" v-if="game_name" :text="game_name" mode="plain" size="mini" />
						<u-tag class="paly_tag" type="error" v-if="game_rank" :text="game_rank" mode="plain" size="mini"/>
						<u-tag class="paly_tag" v-if="play_characteristics" :text="play_characteristics" mode="plain" type="error" size="mini"/>
					</view>
					<view>{{ descriptor }}</view>
				</view>
				<view class="tips">
					<view class="explain">
						<text class="money">{{ price }}</text>
						<text style="font-size: 20upx;">{{ unit }}</text>
						<view v-if="!isService" style="padding-left: 30rpx; font-size: 20upx;">需求</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"hallOkami",
		props: {
			// ID唯一标识
			user_id:{
				type:Number,
				default: 0,
				required: false
			},
			// 性别和年龄标签内容
			sex_age:{
				type:String,
				default: "♀21",
				required: false
			},
			// 性别年龄标签类型
			tag_type: {
				type: String,
				default: 'error',
				required: false,
				validator: function(value) {
					if(value=="error"||value=="primary")
						return true;
					return false;
				}
			},
			// 头像资源路径
			avatar_src:{
				type:String,
				default: "",
				required: false
			},
			// 游戏名字
			game_name:{
				type:String,
				default: "这是游戏名字",
				required: false
			},
			// 游戏段位
			game_rank:{
				type:String,
				default: "段位",
				required: false
			},
			// 玩家特点
			play_characteristics:{
				type:String,
				default: "特点",
				required: false
			},
			// 价格
			price:{
				type:String,
				default: "1.00币",
				required: false
			},
			// 单位
			unit:{
				type:String,
				default: "币/局",
				required: false
			},
			// 描述
			descriptor:{
				type:String,
				default: "王者峡谷走一走，让我陪你到地久。",
				required: false
			},
			// 玩家名字
			play_name:{
				type:String,
				default: "昵称可以有八个字",
				required: false
			},
			// 是否是服务
			isService:{
				type:Boolean,
				default: true,
				required: false
			},
		},
		methods:{
			detail: function(){
				console.debug('点击大神：'+this.user_id);
				uni.navigateTo({
					url:'../../pages/okami_details/okami_details?id='+this.user_id,
					success() {
						console.debug('进入大神详细界面：');
					}
				})
			}
		}
	}
</script>


<style  scoped lang="scss">
	.tui-flex-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 26rpx;
	}
	.paly_tag{
		margin-left: 6rpx;
	}
	.okami {
		width: 100%;
		height: auto;
		background-color: #ffffff;
		display: flex;
		padding: 30rpx 20rpx 10rpx;
		border-radius: 20rpx;
		.left {
			padding: 0 10rpx;
			background-color: #FFFFFF; //rgb(94, 152, 225);
			text-align: center;
			font-size: 28rpx;
			color: #000000;
		}
		.right {
			padding: 10rpx 20rpx 0;
			font-size: 28rpx;
			.top {
				width: 100%;
				border-bottom: 2rpx dashed $u-border-color;
				.title {
					margin-right: 60rpx;
					line-height: 40rpx;
				}
				.bottom {
					// display: flex;
					margin-top: 20rpx;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}
			}
			.tips {
				width: 100%;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.transpond {
					margin-right: 10rpx;
				}
				.explain {
					display: flex;
					align-items: center;
				}
				.money{
					color: #ff0000;
					padding-right: 10rpx;
					font-size: 36upx;
				}
			}
		}
	}
</style>

